<template>
	<view class="main">
		<u-navbar placeholder title=" " leftIconColor="#FFFFFF" bgColor="transparent" @leftClick="back"></u-navbar>
		<view class="header">
			<view class="header-title">
				<image src="@/static/images/activities/header-title.png" mode=""></image>
			</view>
			<view class="header-des">100%中奖 免费领取数字藏品</view>
		</view>
		<view class="goods">
			<view class="goods-box">
				<image src="@/static/images/activities/goods.png" mode=""></image>
			</view>
			<view class="goods-scenic"></view>
		</view>
		<view class="goods_cont">
			<view class="goods_cont-title">
				<image src="@/static/images/activities/good-cont-title.png" mode=""></image>
			</view>
			<scroll-view scroll-y="true" class="goods_cont-cont">
				<u-grid :border="false">
					<u-grid-item v-for="item in box.list" :key="item.id">
						<view class="goods_cont-cont-item">
							<image :src="item.img" mode="aspectFill"></image>
							<view class="goods_cont-cont-item-tag">
								{{item.tag}}
							</view>
							<view class="goods_cont-cont-item-title u-line-1">
								{{item.title}}
							</view>
						</view>
					</u-grid-item>
				</u-grid>

			</scroll-view>
		</view>
		<view class="friend">
			<view class="friend-btns">邀请好友 {{total}} 位</view>
			<view class="goods_cont">
				<view class="goods_cont-title">我的好友</view>
				<scroll-view scroll-y="true" class="goods_cont-friend" @scrolltolower="getInviteUserList()">
					<view class="goods_cont-friend-item" v-for="item in friend" :key="item.id">
						<view class="goods_cont-friend-item-left">
							<u-avatar :src="item.portrait" size="39"></u-avatar>
							<view class="goods_cont-friend-item-left-info">
								<view class="goods_cont-friend-item-left-info-mobile">
									{{item.mobile}}
								</view>
								<view class="goods_cont-friend-item-left-info-day">
									{{item.create_time}}
								</view>
							</view>
						</view>
						<view class="goods_cont-friend-item-right">
							{{item.real_name_status==2?'已认证':'未认证'}}
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<view class="rule">
			<view class="goods_cont">
				<view class="goods_cont-title">活动规则</view>
				<scroll-view scroll-y="true" class="goods_cont-rule">
					<u-parse :content="box.detail"></u-parse>
				</scroll-view>
			</view>
		</view>
		<view class="footernav">
			<view class="" style="height: 232rpx;"></view>
			<view class="footernav-nav">
				<view class="footernav-nav-title">邀请好友拆盲盒 100%中奖</view>
				<view class="footernav-nav-btns">
					<button :disabled="box.package<1" @click="reveal=true">拆盲盒{{box.package||0}}个</button>
					<button @click="share=true">邀请好友拆盲盒</button>
				</view>
			</view>
		</view>
		<u-popup :show="reveal" bgColor="transparent" mode="center" @close="reveal=false">
			<view class="reveal">
				<view class="reveal-title">恭喜您获得</view>
				<view class="reveal-des">一个盲盒</view>
				<image src="@/static/images/activities/box.png" mode="aspectFill"></image>
				<u-button :disabled="box.package<1" :loading="loading" @click="revealBox">去拆盲盒</u-button>
				<view class="close" @click="reveal=false">
					<u-icon name="close" color="#BFBFCA" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup :show="result" bgColor="transparent" mode="center" @close="result=false">
			<view class="reveal">
				<view class="reveal-title">恭喜您获得</view>
				<view class="reveal-result">
					<image :src="boxImg" mode="aspectFill"></image>
				</view>
				<!-- <view class="reveal-title">无限延无限延无限延无限延</view> -->
				<!-- <button @click="share=true">分享拆盲盒</button> -->
				<view class="reveal-result-des">
					拆盲盒机会剩余{{box.package}}次
				</view>
				<view class="close" @click="result=false">
					<u-icon name="close" color="#BFBFCA" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup :show="share" bgColor="transparent" @close="share=false">
			<view class="share">
				<view class="share-title">分享</view>
				<view class="share-share">
					<u-icon labelColor="#999999" labelPos="bottom" label="微信好友" name="weixin-circle-fill"
						color="#009800" @click="WxShare('WXSceneSession')" size="50"></u-icon>
					<u-icon labelColor="#999999" labelPos="bottom" label="朋友圈" name="moments" color="#009800"
						@click="WxShare('WXSceneTimeline')" size="50"></u-icon>
				</view>
				<view class="close" @click="share=false">
					<u-icon name="close" color="#BFBFCA" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				loading: false,
				reveal: false,
				result: false,
				share: false,
				options: {},
				box: {},
				total: 0,
				page: 1,
				friend: [],
				links: '', //盲盒链接
				boxImg: '', //盲盒图片
			};
		},
		onLoad(e) {
			this.options = e
		},
		onShow() {
			this.inviteactivvitiesGetInviteInfo()
			this.getInviteUserList()
			this.inviteFriends()
		},
		methods: {
			//邀请链接
			async inviteFriends() {
				let res = await this.$http({
					url: this.$api.inviteFriends,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {}
				})
				console.log('[邀请链接]', res)
				if (res.code == 200) {
					this.links = res.data.poster_url
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//邀请记录
			async getInviteUserList() {
				let res = await this.$http({
					url: this.$api.getInviteUserList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.options.id,
						page: this.page
					}
				})
				console.log('[邀请记录]', res.data.data, res.data.total)
				if (res.code == 200) {
					this.total = res.data.total
					if (this.friend.length < this.total) {
						if (this.page == 1) {
							this.friend = res.data.data
						} else {
							this.friend = this.friend.concat(res.data.data)
						}
						this.page = this.page + 1
					}
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//拆盲盒
			async revealBox() {
				this.loading = true
				let res = await this.$http({
					url: this.$api.inviteactivvitiesOpenPackage,
					method: 'GET',
					hideLoading: false,
					needToken: true,
					data: {
						id: this.options.id
					}
				})
				this.loading = false
				console.log('[拆盲盒]', res)
				if (res.code == 200) {
					this.boxImg = res.data.url
					this.inviteactivvitiesGetInviteInfo()
					this.reveal = false
					this.result = true
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//活动信息
			async inviteactivvitiesGetInviteInfo() {
				let res = await this.$http({
					url: this.$api.inviteactivvitiesGetInviteInfo,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.options.id
					}
				})
				console.log('[活动信息]', res)
				if (res.code == 200) {
					this.box = res.data
				}
			},
			//邀请好友
			WxShare(scene) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: this.links,
					title: "邀请好友拆盲盒！",
					imageUrl: this.box.img,
					summary: "快来跟我一起拆盲盒吧！",
					success: (res) => {
						console.log("[分享成功]", res);
						uni.showToast({
							title: '发送邀请成功',
							duration: 2000,
							icon: 'none'
						});
					},
					fail: (err) => {
						console.log("[分享失败]", err);
						uni.showToast({
							title: '发送邀请失败' + err.errMsg,
							duration: 2000,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		min-height: 100vh;
		background: #000103 url(@/static/images/activities/hd-bg.png)left top no-repeat;
		background-size: 750rpx 908rpx;

		.header {
			&-title {
				width: 632rpx;
				height: 92rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-des {
				width: 384rpx;
				height: 52rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, #FFEDC5 0%, #FCB94D 100%);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #000000;
				line-height: 52rpx;
				text-align: center;
			}
		}

		.goods {
			margin-top: 52rpx;

			&-box {
				width: 100%;
				text-align: center;
				background: url(@/static/images/activities/goods-bg.png)left center no-repeat;
				background-size: 750rpx 484rpx;

				image {
					margin: 0 auto;
					width: 584rpx;
					height: 524rpx;
				}
			}

			&-scenic {
				width: 640rpx;
				height: 254rpx;
				margin: -44rpx auto 0 auto;
				background: url(@/static/images/dipan.png)left center no-repeat;
				background-size: 640rpx 254rpx;
			}
		}

		.goods_cont {
			margin: 0 27rpx;
			border-radius: 30rpx;
			border: 4rpx solid #EFB23E;
			background: url(@/static/images/activities/goods-cont-bg.png)center center no-repeat;
			background-size: 648rpx 260rpx;

			&-title {
				height: 86rpx;
				background: rgba(225, 165, 52, 0.2);
				border-radius: 20rpx 20rpx 0px 0px;
				text-align: center;
				line-height: 86rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #FDBB50;

				image {
					width: 186rpx;
					height: 58rpx;
					vertical-align: middle;
				}
			}

			&-cont {
				padding: 72rpx 0 44rpx 0;
				height: 790rpx;

				&-item {
					position: relative;
					font-size: 0;

					image {
						background-color: #FFEDC5;
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}

					&-tag {
						width: 68rpx;
						height: 32rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						background: #EFB23E;
						position: absolute;
						left: 16rpx;
						top: 12rpx;

						&.epic {
							background: linear-gradient(180deg, #F89A72 0%, #EF3E54 100%);
						}

						&.rare {
							background: linear-gradient(180deg, #72B7F8 0%, #6A3EEF 100%);
						}
					}

					&-title {
						width: 200rpx;
						margin: 16rpx 0 22rpx 0;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
					}
				}
			}

			&-friend {
				height: 480rpx;

				&-item {
					padding: 18rpx 20rpx 22rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #564B35;

					&-left {
						display: flex;
						align-items: center;

						&-info {
							margin-left: 12rpx;

							&-mobile {
								font-size: 24rpx;
								font-weight: 600;
								color: #FFFFFF;
								line-height: 34rpx;
							}

							&-day {
								font-size: 24rpx;
								font-weight: 600;
								color: #FFFFFF;
								line-height: 34rpx;
								margin-top: 8rpx;
							}
						}
					}

					&-right {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}

			&-rule {
				width: 100%;
				box-sizing: border-box;
				height: 280rpx;
				padding: 36rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #BDA681;
				line-height: 40rpx;
			}
		}

		.friend {
			&-btns {
				margin: 52rpx auto 30rpx auto;
				width: 384rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #FFEDC5 0%, #FCB94D 100%);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #000000;
				line-height: 52rpx;
				text-align: center;
			}
		}

		.rule {
			margin-top: 36rpx;
		}

		.footernav {
			&-nav {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				height: 204rpx;
				background: rgba(65, 65, 65, 0.5);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&-title {
					font-size: 24rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
				}

				&-btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 22rpx;

					button {
						width: 316rpx;
						height: 82rpx;
						background: linear-gradient(180deg, #FFFFFF 0%, #827C73 100%);
						box-shadow: 0px 4rpx 8rpx 6rpx rgba(92, 92, 92, 0.4);
						border-radius: 41px;
						font-size: 36rpx;
						font-weight: 600;
						color: #000000;
						line-height: 82rpx;

						&:nth-child(2) {
							width: 358rpx;
							background: linear-gradient(180deg, #FED792 0%, #FDBA4E 100%);
							box-shadow: 0px 4rpx 8rpx 6rpx rgba(180, 121, 25, 0.4);
						}
					}
				}
			}
		}

		.reveal {
			width: 672rpx;
			height: 776rpx;
			background: #1D1D1F;
			border-radius: 30rpx;
			border: 4rpx solid rgba(255, 203, 0, 0.6);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 0;
			position: relative;

			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
				margin-bottom: 36rpx;
			}

			&-des {
				font-size: 44rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 60rpx;
			}

			image {
				width: 496rpx;
				height: 456rpx;
			}

			button {
				width: 358rpx;
				height: 82rpx;
				background: linear-gradient(180deg, #FED792 0%, #FDBA4E 100%);
				box-shadow: 0px 4rpx 8rpx 6rpx rgba(180, 121, 25, 0.4);
				border-radius: 41px;
				font-size: 36rpx;
				font-weight: 600;
				color: #000000;
				line-height: 82rpx;
				margin-bottom: 30rpx;
			}

			.close {
				position: absolute;
				right: 42rpx;
				top: 36rpx;
			}

			&-result {
				width: 352rpx;
				height: 352rpx;
				// box-shadow: 0px 4rpx 8rpx 0px #0400A0;
				border-radius: 50rpx;
				border: 4rpx solid rgba(239, 178, 62, 0.99);
				margin: 0rpx 0 20rpx 0;
				padding: 16rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					background-color: #FFEDC5;
					border-radius: 50rpx;
				}
			}

			&-result-des {
				font-size: 24rpx;
				font-weight: 600;
				color: #999999;
				line-height: 44rpx;
			}
		}

		.share {
			background: #1D1D1F;
			border-radius: 30rpx 30rpx 0 0;
			position: relative;
			padding: 40rpx 40rpx 60rpx 40rpx;

			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
				margin-bottom: 36rpx;
				text-align: center;
			}

			&-share {
				display: flex;
				align-items: center;
				justify-content: center;

				::v-deep .u-icon {
					margin: 0 80rpx;
				}
			}

			.close {
				position: absolute;
				right: 42rpx;
				top: 36rpx;
			}
		}
	}
</style>
